<!--
 * @Author: Your Name you@example.com
 * @Date: 2024-03-21 15:25:08
 * @LastEditors: Your Name you@example.com
 * @LastEditTime: 2024-03-21 18:23:44
 * @FilePath: \dm\Vue\day01\vue.js的代码结构.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue</title>
        <script src="./vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <div>{{msg+age}}</div>
            <div v-text="msg">1</div>
            <div v-html="msg">2</div>
            <div v-text="html">3</div>
            <div v-html="html">4</div>
            <!-- v-bind元素属性绑定 -->
            <img v-bind:src="imgSrc" alt="">
            <!-- 简写 -->
            <img :src="imgSrc" alt="">
            <!-- v-on绑定事件 -->
            <div>
                <button v-on:click="logDel">单击删除图片</button>
            </div>
            <!-- 简写@ -->
            <div>
                <button @click="logAdd">单击添加图片</button>
            </div>
            <div>
                <button @click="logAd">单击显示或删除图片</button>
            </div>
        </div>
    </body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '学习Vue',
                age: 18,
                html: '<a href="">学习Vue</a>',
                imgSrc: 'https://sponsors.vuejs.org/images/vuemastery.avif'
            },
            methods: {
                logDel () {
                    this.imgSrc = '';
                },
                logAdd () {
                    this.imgSrc = 'https://sponsors.vuejs.org/images/vuemastery.avif';
                },
                logAd () {
                    if (this.imgSrc == '') {
                        this.imgSrc = 'https://sponsors.vuejs.org/images/vuemastery.avif';
                    } else {
                        this.imgSrc = '';
                    }
                }
            }
        })
    </script>
</html>